<%--
  Created by IntelliJ IDEA.
  User: wyp
  Date: 2020/5/27
  Time: 18:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/main.css">
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/layui.css">
    <script type="text/javascript" src="./resources/lib/layui/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./resources/css/bootstrap.css" />
    <link rel="stylesheet" href="./resources/css/style.css" type="text/css" media="all"/>
    <!--引入JQuery，必须要在bootstrap.js之前引入-->
    <script type="text/javascript" src="./resources/js/jquery-3.4.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="./resources/js/bootstrap.js"></script>
    <title>线路详情</title>
</head>
<body>

<!--头部文件-->
<%@include file="WEB-INF/view/index/top.jsp"%>

<!--搜索文件-->
<%@include file="WEB-INF/view/index/navigation.html"%>

<!--中间部分1-->

<script>
    // 获取地址栏参数
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    $(document).ready(function () {
        console.log("页面载入");
        // 获取地址栏id
        var spotId = getQueryVariable("spotId");
        console.log("获取ID："+spotId);
        spotList(spotId);
    });

    //发送到SpotController请求数据
    function spotList(spotId) {
        $.ajax({
            type: "POST",
            dataType: "json",
            data:{"method":"spotDetail","spotId":spotId},
            url:"./spotController",
            success:function (data) {
                outSpot(data);
                console.log(data);
            }
        });
        return false;
    };

    //输出景点
    function outSpot(data) {
        document.getElementById("spotName").value=data.spotName;
        //设置景点图片
        document.getElementById("spotImg").src="."+data.spotImgUrl;
        // 添加title
        var title = " <h2>"+data.spotName+"</h2>\n" +
            "                    <br/>\n" +
            "                    <h4>"+data.spotPlace+"</h4>";
        $("#title").html(title);
        // 添加价格
        var price = "";
        price = "<i>￥</i>"+data.spotPrice;
        $("#price").html(price);
        //添加开放时间
        var openTime = data.spotOpenTime ;
        $("#openTime").html(openTime);
        //添加负责人电话
        var spotItem = data.spotItem;
        $("#spotItem").html(spotItem);
    };

    //立刻抱团，去线路查找包含该景点的线路
    function searchRoutes() {
        var spotName = document.getElementById("spotName").value;
        window.location.href="./routesList.jsp?spotName="+spotName;
    };

    //添加订单
    function orderAdd() {
        //获取参数
        var userId = $('#userId').val();
        console.log("orderAdd:"+userId);
        if( userId === "" || userId == null || userId === "null"){
            alert("您还未登陆，请登陆！");
            window.location.href='/login';
        }else {
            var touristCompanyId = $('#touristCompanyId').val();
            // 获取地址栏id
            var touristId = getQueryVariable("touristId");

            $.ajax({
                type:"POST",
                data:{"method":"orderAdd","userId":userId,"touristCompanyId":touristCompanyId,
                    "touristId":touristId},
                url:"/routesController",
                dataType:"json",
                success:function (data) {
                    alert("预约成功！");
                    window.location.reload();
                },
                error:function (data) {
                    alert("预约失败！");
                }
            });
        }

    }

</script>
<%--用来存储景点名--%>
<input type="text" style="display: none" id="spotName" name="spotName">
<div class="content content-nav-base datails-content" style="padding-top: 2%">
    <div class="data-cont-wrap w1200">
    <div class="product-intro layui-clear">
        <div class="preview-wrap" >
            <a href="javascript:;"><img id="spotImg" src="" style="width: 700px;height: 460px;"></a>
        </div>
        <div class="itemInfo-wrap">
            <div class="itemInfo" style="float: right;width: 50%;">
                <div class="title" id="title">
                </div>
                <div class="summary">
                    <p class="activity"><span>门票</span><strong class="price" id="price"></strong></p>
                    <p class="address-box"><span>开放时间</span><strong class="address" id="openTime"></strong></p>
                </div>
                <div class="choose-attrs">
                    <div class="color layui-clear"><span>游玩项目：</span> <span id="spotItem"></span></div>

                </div>
                <div class="choose-btns" id="routesOrder">
                    <button class="layui-btn layui-btn-primary purchase-btn" type="button" onclick="searchRoutes()" >立刻抱团</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--尾部文件-->
<%@include file="WEB-INF/view/index/footer.html"%>

</body>
</html>
